<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
</head>
<body>
    <!-- 主要是用JavaScript进行操作 -->
    <canvas id="myCanvas1" width="200" height="100" style="border: 1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas1");
        var cxt=c.getContext("2d");
        // cxt.fillStyle="#FF0000";
        // cxt.fillRect(0,0,150,75);
    
        cxt.moveTo(10,10);
        cxt.lineTo(150,50);
        cxt.lineTo(10,50);
        cxt.stroke();
    </script>
    <br />
    <canvas id="myCanvas2" width="200" height="100" style="border: 1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas2");
        var cxt=c.getContext("2d");
        // cxt.fillStyle="#FF0000";
        // cxt.fillRect(0,0,150,75);
    
        cxt.fillStyle="#FF0000";
        cxt.beginPath();
        cxt.arc(70,18,15,0,Math.PI*2,true);
        cxt.closePath()
        cxt.fill();
    </script>
    <br />
    <canvas id="myCanvas3" width="200" height="100" style="border: 1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas3");
        var cxt=c.getContext("2d");
        var grd=cxt.createLinearGradient(0,0,200,100);
        grd.addColorStop(0,"#FF0000");
        grd.addColorStop(1,"#0000FF");
        cxt.fillStyle=grd;
        // cxt.fillRect(0,0,200,100);
        var img=new Image();
        img.src="flower.png";
        cxt.drawImage(img,0,0);
    </script>
    <br />
</body>
</html>